---
title: Angular + Hanko
sidebar_label: Angular
keywords: [angular]
sidebar_custom_props:
  docCardIconName: angular
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Angular

In this guide you will learn how to use the
[hanko-elements](https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md) web components to
add authentication and a user profile to your Angular application.

## Install dependencies

Install the `@teamhanko/hanko-elements` package:

```shell npm2yarn
npm install @teamhanko/hanko-elements
```

## Define custom elements schema

Angular requires you to explicitly declare that you are using custom elements inside your Angular modules, otherwise
it will fail during build complaining about unknown elements. To do so, import the
[`CUSTOM_ELEMENTS_SCHEMA`](https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA), and add it to the `schemas` in your
module:

```js {1,14} title="app.module.ts" showLineNumbers
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
```
## Add `<hanko-auth>` component

To provide a login interface in your app, use the `<hanko-auth>` web component. To do so, first import the `register` function
from `@teamhanko/hanko-elements` in your Angular component. Call it with the URL of the Hanko API as an argument to register
the `<hanko-auth>` element with
the browser's [`CustomElementRegistry`](https://developer.mozilla.org/de/docs/Web/API/CustomElementRegistry).
Then use the element in your component template.

:::info

If you are using [Hanko Cloud](https://cloud.hanko.io), you can find the API URL on your project dashboard.
If you are self-hosting you need to provide the URL of your running Hanko backend.

:::

```mdx-code-block
<Tabs>
<TabItem value="html" label="login.component.html">
```

```html showLineNumbers
<hanko-auth/>
```

```mdx-code-block
</TabItem>
<TabItem value="ts" label="login.component.ts">
```

```js showLineNumbers
import { Component } from '@angular/core';
import { register } from '@teamhanko/hanko-elements';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  hankoApi = "<YOUR_API_URL>";

  constructor() {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register(hankoApi)
      .catch((error) => {
        // handle error
      });
  }
}
```

```mdx-code-block
</TabItem>
</Tabs>
```

## Add `<hanko-events>` component

The `<hanko-events>` component provides a convenient way to subscribe to specific
[events](https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#events) without displaying any UI elements.
The other hanko-elements will also dispatch these events.

To utilize this functionality in your Angular application, you can leverage Angular's event binding mechanism and define
callback functions within your component. This allows you to respond to the dispatched events accordingly.

Import the `register` function from `@teamhanko/hanko-elements` in your Angular component. Call it with the URL of the
Hanko API as an argument to register the `<hanko-events>` element with the browser's
[`CustomElementRegistry`](https://developer.mozilla.org/de/docs/Web/API/CustomElementRegistry).
Then use the element in your component template.

```mdx-code-block
<Tabs>
  <TabItem value="html" label="login.component.html">
```

```html showLineNumbers
<hanko-auth />
<hanko-events (onAuthFlowCompleted)="redirectAfterLogin()" />
```

The lines above can be combined to:

```html showLineNumbers
<hanko-auth (onAuthFlowCompleted)="redirectAfterLogin()" />
```

```mdx-code-block
</TabItem>
<TabItem value="ts" label="login.component.ts">
```

```js showLineNumbers
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { register } from '@teamhanko/hanko-elements';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
})
export class LoginComponent {
  hankoApi = "<YOUR_API_URL>";

  constructor(private router: Router) {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register(hankoApi)
      .catch((error) => {
        // handle error
      })
  }

  redirectAfterLogin() {
    // successfully logged in, redirect to a page in your application
    this.router.navigate('...');
  }
}
```

```mdx-code-block
</TabItem>
</Tabs>
```

## Add `<hanko-profile>` component {#hanko-profile}

To provide a page where users can manage their email addresses, password and passkeys, use the `<hanko-profile>` web
component. Import the `register` function from `@teamhanko/hanko-elements` in your Angular component. Call it with the
URL of the Hanko API as an argument to register the `<hanko-profile>` element with the browser's
[`CustomElementRegistry`](https://developer.mozilla.org/de/docs/Web/API/CustomElementRegistry).
Then use the element in your component template.

```mdx-code-block
<Tabs>
<TabItem value="html" label="profile.component.html">
```

```html showLineNumbers
  <hanko-profile />
```

```mdx-code-block
</TabItem>
<TabItem value="ts" label="profile.component.ts">
```

```js showLineNumbers
import { Component } from '@angular/core';
import { register } from '@teamhanko/hanko-elements';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent {
  hankoApi = "<YOUR_API_URL>";

  constructor() {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register(hankoApi)
      .catch((error) => {
        // handle error
      });
  }
}
```

```mdx-code-block
</TabItem>
</Tabs>
```

## Implement logout

Use the Hanko client provided by `@teamhanko/hanko-elements` to log out users. On logout a custom event is
dispatched that you can subscribe to:

```mdx-code-block
<Tabs>
<TabItem value="html" label="profile.component.html">
```

```html showLineNumbers
  // highlight-start
  <button (click)="logout()" class="button">Logout</button>
  <hanko-profile (onUserLoggedOut)="redirectAfterLogout()" />
  // highlight-end
```

```mdx-code-block
</TabItem>
<TabItem value="ts" label="profile.component.ts">
```

```js showLineNumbers
import { Component } from '@angular/core';
// highlight-next-line
import { Router } from '@angular/router';
// highlight-next-line
import { register, Hanko } from '@teamhanko/hanko-elements';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent {
  hankoApi = "<YOUR_API_URL>";
  // highlight-next-line
  hanko = new Hanko(hankoApi);

  // highlight-start
  logout() {
    this.hanko.user.logout().catch((error) => {
      // handle error
    });
  }
  // highlight-end

  // highlight-next-line
  constructor(private router: Router) {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register(hankoApi)
      .catch((error) => {
        // handle error
      });
  }

  // highlight-start
  redirectAfterLogout() {
    // successfully logged out, redirect to a login page
    this.router.navigate('...');
  }
  // highlight-end
}
```

```mdx-code-block
</TabItem>
</Tabs>
```

## Customize component styles

The styles of the `hanko-auth` and `hanko-profile` elements can be customized using CSS variables and parts. See our
guide on customization [here](https://github.com/teamhanko/hanko/tree/main/frontend/elements#ui-customization).

## Authenticate backend requests

If you want to authenticate requests in your own backend, please view our [backend guide](/guides/backend).
